import React, { Component } from "react";
import BScroll from "@better-scroll/core";
import PullDown from "@better-scroll/pull-down";
import "./style.scss";

BScroll.use(PullDown);

class AppScroll extends Component {
    // 生成一个ref
    scrollViewRef = React.createRef();
    render() {
        const { pulldown } = this.props;
        return (
            <div
                className={`scroll-view ${this.props.className}`}
                ref={this.scrollViewRef}
            >
                <div className="scroll-wrap">
                    {/* 下拉刷新 */}
                    {pulldown && <div className="pull-down">loading</div>}
                    {this.props.children}
                </div>
            </div>
        );
    }
    componentDidMount() {
        this.scroll = new BScroll(this.scrollViewRef.current, {
            // 配置下拉刷新
            pullDownRefresh: this.props.pulldown && {
                threshold: 90 * window.dpr,
                stop: 44 * window.dpr, //下拉刷新的可以占据的位置
            },
        });
        this.scroll.on("beforeScrollStart", () => {
            this.scroll.refresh();
        });

        //   监听下拉刷新事件

        this.props.pulldown &&
            this.scroll.on("pullingDown", () => {
                this.props.onPullDown && this.props.onPullDown();
            });
    }
    closePullDown() {
        this.scroll.finishPullDown();
    }
}

export default AppScroll;
